<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴菜单</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="sfq.css">
</head>
<body>
    <div class="accordion">
        <!-- 第一个菜单项 -->
        <div class="accordion-item">
            <div class="accordion-header">
                <i class="fas fa-home accordion-icon"></i>
                <span class="accordion-title">首页</span>
                <i class="fas fa-chevron-right accordion-arrow"></i>
            </div>
            <div class="accordion-content">
                <div class="accordion-content-inner">
                    <a href="#" class="accordion-link"><i class="fas fa-chart-line"></i>数据概览</a>
                    <a href="#" class="accordion-link"><i class="fas fa-bell"></i>最新通知</a>
                    <a href="#" class="accordion-link"><i class="fas fa-calendar-alt"></i>活动日历</a>
                </div>
            </div>
        </div>
        
        <!-- 第二个菜单项 -->
        <div class="accordion-item">
            <div class="accordion-header">
                <i class="fas fa-user accordion-icon"></i>
                <span class="accordion-title">个人中心</span>
                <i class="fas fa-chevron-right accordion-arrow"></i>
            </div>
            <div class="accordion-content">
                <div class="accordion-content-inner">
                    <a href="#" class="accordion-link"><i class="fas fa-id-card"></i>个人资料</a>
                    <a href="#" class="accordion-link"><i class="fas fa-lock"></i>安全设置</a>
                    <a href="#" class="accordion-link"><i class="fas fa-history"></i>操作记录</a>
                </div>
            </div>
        </div>
        
        <!-- 第三个菜单项 -->
        <div class="accordion-item">
            <div class="accordion-header">
                <i class="fas fa-cog accordion-icon"></i>
                <span class="accordion-title">系统设置</span>
                <i class="fas fa-chevron-right accordion-arrow"></i>
            </div>
            <div class="accordion-content">
                <div class="accordion-content-inner">
                    <a href="#" class="accordion-link"><i class="fas fa-palette"></i>主题设置</a>
                    <a href="#" class="accordion-link"><i class="fas fa-bell"></i>通知设置</a>
                    <a href="#" class="accordion-link"><i class="fas fa-language"></i>语言设置</a>
                </div>
            </div>
        </div>
        
        <!-- 第四个菜单项 -->
        <div class="accordion-item">
            <div class="accordion-header">
                <i class="fas fa-question-circle accordion-icon"></i>
                <span class="accordion-title">帮助中心</span>
                <i class="fas fa-chevron-right accordion-arrow"></i>
            </div>
            <div class="accordion-content">
                <div class="accordion-content-inner">
                    <a href="#" class="accordion-link"><i class="fas fa-book"></i>使用文档</a>
                    <a href="#" class="accordion-link"><i class="fas fa-video"></i>视频教程</a>
                    <a href="#" class="accordion-link"><i class="fas fa-headset"></i>在线客服</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JS文件 -->
    <script src="sfq.js"></script>
</body>
</html>